<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>综合案例</title>

</head>
<body>
<div id="app">
  <!--<ul>-->
  <!--  <li v-for="user in userList">id: {{user.id}}, 姓名: {{user.name}}, 年龄: {{user.age}}, 邮箱: {{user.email}}</li>-->
  <!--</ul>-->
  <table border="1">
    <tr>
      <th>序号</th>
      <!--<th>id</th>-->
      <th>姓名</th>
      <th>年龄</th>
      <th>邮箱</th>
    </tr>
    <tr v-for="(user,index) in userList">
      <td>{{index+1}}</td>
      <!--<td>{{user.id}}</td>-->
      <td>{{user.name}}</td>
      <td>{{user.age}}</td>
      <td>{{user.email}}</td>
    </tr>
  </table>

</div>
<script src="vue.js"></script>
<script src="axios.js"></script>
<script>
  new Vue({
    el: '#app',
    data: {
      userList: []
    },
    created() {
      this.getUserList()
    },
    methods: {
      getUserList() {
        const request = axios.create({
          baseURL: 'http://localhost:8080',
          timeout: 3000,
        })
        // request({
        //   url: '/user/list',
        //   method: 'get'
        // }).then(response => {
        //   this.userList = response.data
        // }).catch(error => {
        //   console.log('数据获取失败', error)
        // })

        request
          .get('/user/list')
          .then(response => {
            this.userList = response.data
          })
          .catch(error => {
            console.log('数据获取失败', error)
          })
      }
    }
  })
</script>
</body>
</html>